import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';

const features = [
  {
    title: '配置轻量',
    // imageUrl: 'img/undraw_docusaurus_mountain.svg',
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>
    ),
  },
  {
    title: '容易上手',
    // imageUrl: 'img/undraw_docusaurus_tree.svg',
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
        ahead and move your docs into the <code>docs</code> directory.
      </>
    ),
  },
  {
    title: '简单好用',
    // imageUrl: 'img/undraw_docusaurus_react.svg',
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can
        be extended while reusing the same header and footer.
      </>
    ),
  },
];

function Feature({imageUrl, title, description}) {
  const imgUrl = useBaseUrl(imageUrl);
  return (
    <div className={clsx('col col--6', styles.feature)}>
      {imgUrl && (
        <div className="text--center">
          <img className={styles.featureImage} src={imgUrl} alt={title} />
        </div>
      )}
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

function Home() {
  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  const bannerImgUrl = useBaseUrl('img/logo3.png');

  return (
    <Layout
      title={`Home`}
      description="Description will go into a meta tag in <head />">
      <header className={clsx('hero banner', styles.heroBanner)}>
        <div className="container">
            <div className="row">
            <div className="col col--6">
          {/*<h1 className="hero__title">{siteConfig.title}</h1>*/}
          {/*  <h1 className="banner-title">{siteConfig.title}</h1>*/}
            <h1 className="banner-title">{siteConfig.tagline}</h1>
                <p className="banner-subtitle">
                    Forest能够帮助您用更简单的方式编写Java的HTTP客户端
                </p>
          <div className={styles.buttons}>
              <Link
                  className={clsx(
                      'button button--lg',
                      styles.myButton, styles.startButton,
                  )}
                  to={useBaseUrl('docs/')}>
                  极速开始
              </Link>
              <Link
                  className={clsx(
                      'button button--secondary button--lg',
                      styles.myButton, styles.giteeButton,
                  )}
                  to={'https://gitee.com/dt_flys/forest'}>
                  Gitee
              </Link>
              <Link
                  className={clsx(
                      'button button--secondary button--lg',
                      styles.myButton, styles.githubButton,
                  )}
                  to={'https://github.com/mySingleLive/forest'}>
                  GitHub
              </Link>
          </div>
            </div>
            <div className="col col--6">
                <div className="text--center">
                    <img className={styles.bannerImage} src={bannerImgUrl} alt="" />
                </div>
            </div>
            </div>
        </div>
      </header>
      <main>
        {features && features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
                {features.map((props, idx) => (
                    <div className="row">
                        <Feature key={idx} {...props} />
                    </div>
                ))}
            </div>
          </section>
        )}
      </main>
    </Layout>
  );
}

export default Home;
